<template>
  <div class="detailwarp">
    <!-- 轮播图 -->
    <div class="top-box">
      <mt-swipe :auto="4000" class="lbt">
        <mt-swipe-item v-for="(item,index) in imgs" :key="'info1-'+index">
              <img :src="item" alt="" />
        </mt-swipe-item>
        
      </mt-swipe>
      <span class="back" @click="back">
        <img src="../../../static/images/cart/cart04.png" alt="" />
      </span>
    </div>
    <!-- 文本介绍，价格 -->
    <div class="text" v-for="(item,index) in shopArr.datas"  :key="'info-'+index">
      <div class="price">
        ￥<span>{{item.curtPrice}}</span><s>￥{{item.oldPrice}}</s>
        </div>
      <p>{{item.title}}</p>
    </div>
   <!-- 服务，选择，参数 --> 
    <template v-for="(item, index) in list">
      <template v-if="item.fn">
        <div :key="index">
          <div class="bg"></div>
          <div class="lists" @click="item.fn">
            <span>{{ item.title }}</span>
            <div>{{ item.text }}</div>
          </div>
        </div>
      </template>
      <!-- 判断有没有点击事件有就加  没有就不加 -->
      <template v-else>
        <div :key="index">
          <div class="bg"></div>
          <div class="lists">
            <span>{{ item.title }}</span>
            <div>{{ item.text }}</div>
          </div>
        </div>
      </template>
    </template>
    <!-- 评价，更多 -->
    <div class="bg"></div>
    <div class="evaluate">
      <div class="evaluate-more">
        <div>评价</div>
        <div>
          更多
          <div class="go">
            <img src="../../../static/images/cart/cart02.png" alt="" />
          </div>
        </div>
      </div>
      <div class="noEvaluate">暂无评价</div>
    </div>
    <div class="bg"></div>
    <!-- 客服。。 -->
    <div class="detai-bottom">
      <div class="left-bottom">
        <ul>
          <li v-for="(item, index) in icons" :key="index">
            <img :src="item.imgurl" alt="" />
            <br />
            {{ item.text }}
          </li>
          <!-- <i @click="goshop">{{this.$store.state.detailcount }}</i> -->
        </ul>
      </div>
    <!-- 加入购物车 -->
      <div class="right-bottom">
        <ul>
          <li>
            <mt-button size="small" class="jion" @click="drawer"
              >加入购物车</mt-button
            >
          </li>
          <li>
            <mt-button size="small" class="fast"  @click="goshop">立即购买</mt-button>
          </li>
        </ul>
      </div>
    </div>
    <!-- 两个弹出组件 -->
    <onshop ref="show"></onshop>
    <datas ref="show2"></datas>
  </div>
</template>

<script>
import onshop from "./onshop/onshop";
import datas from "./datas/datas";
import { mapMutations } from 'vuex';

export default {
  components: {
    onshop,
    datas,
  },
  data() {
    return {
      shownum:'',
      list: [
        {
          title: "服务",
          text: "假一赔十·无理由 退换",
        },
        {
          title: "选择",
          text: "请选择型号",
          fn: this.drawer,
        },
        {
          title: "参数",
          text: "查看更多参数信息",
          fn: this.datas,
        },
      ],
      icons: [
        {
          imgurl: "../../../static/images/cart/cart09.png",
          text: "收藏",
        },
        {
          imgurl: "../../../static/images/cart/cart08.png",
          text: "客服",
        },
        {
          imgurl: "../../../static/images/cart/cart10.png",
          text: "购物车",
        },
      ],
      shopArr:[],
      imgs:[],
      count:0
    };
  },
  mounted() {
      this.shownum=this.$store.state.flag,
      this.detailFn();
      
      this.$store.commit('detailcountFn')
      
  },
  computed:{
    ...mapMutations(['detailcount']),
      fn(){
          if(!this.$store.state.selectflag){

          }else{
             return this.shownum=this.$store.state.flag
          }
         
      }
  },
  methods: {
    //弹出窗口1
    datas() {
      this.$refs["show2"].dak2();
    },
    //弹出窗口2
    drawer() {
      this.$refs["show"].dak();
    },
    //返回上一级
    back(){
      this.$router.go(-1)
    },
    //立即购买
    goshop(){
      this.$refs["show"].dak();
    },
    detailFn(){
      let list=this.$route.query;
      this.shopArr=list,
      this.imgs=this.shopArr.curtShopDetail.bannerImgs
      console.log(this.imgs);
    },
    goshop(){
      this.$router.push('/shop')
    }
  },
};
</script>

<style scoped lang="less">
.detailwarp {
    div{
        background-color: #fff;
    }
  .top-box {
    position: relative;
    .lbt {
      height: 480px;
      width: 100%;
      img {
        width: 100%;
        height: 105%;
      }
    }
    .back {
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: url(../../../static/images/cart/cart12.png) no-repeat center
        center;
      position: absolute;
      top: 40px;
      left: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 30px;
        height: 45px;
      }
    }
  }
  .text {
    width: 100%;
    height: 120px;
    text-align: left;
    padding: 0 90px 10px 35px;
    border-top: 2px solid #c5f3f3;
    .price {
      font-size: 12px;
      color: red;
      span {
        font-size: 35px;
      }
      s {
        color: grey;
      }
    }
    p {
      font-size: 25px;
    }
  }
  .bg {
    width: 100%;
    height: 20px;
    background-color: #ece7e7;
  }
  .lists {
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    text-align: left;
    span {
      color: gray;
      padding: 0 35px;
    }
    div {
      display: inline-block;
    }
  }
  .evaluate {
    background-color: #fff;
    padding: 0 35px;
    height: 190px;
    .evaluate-more {
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      padding: 20px;
      height: 40px;
      line-height: 40px;
      .go {
        margin-left: 20px;
        img {
          width: 15px;
          height: 26px;
        }
      }
      div {
        display: inline-block;
      }
    }
    .noEvaluate {
      line-height: 130px;
      font-size: 25px;
    }
  }
  .detai-bottom {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 200px;
    .left-bottom {
      width: 50%;
      font-size: 15px;
      margin-top: 110px;
      ul {
        display: flex;
        position: relative;
        i {
          background-color: red;
          color: #fff;
          border-radius: 50%;
          width: 30px;
          position: absolute;
          top: 0px;
          right: 23px;
        }
        li {
          flex: 1;
          img {
            display: inline-block;
            width: 50px;
            height: 50px;
          }
        }
      }
    }
    .right-bottom {
      width: 50%;
      margin-top: 110px;
      ul {
        display: flex;
        li {
          flex: 1;
          position: relative;
          button {
            width: 85%;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            margin-top:20px ;
            color: #fff;
            font-size: 25px;
          }
          .jion {
            background-color: #f7bc3e;
          }
          .fast {
            background-color: #fc2c49;
          }
        }
      }
    }
  }
}
</style>